import React, { useState } from "react";
import axios from "axios";
import "./App.css";

function App() {
  const [input, setInput] = useState("");
  const [history, setHistory] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleSend = async () => {
    if (!input.trim()) return;
    setLoading(true);
    setHistory([...history, { role: "user", content: input }]);
    try {
      const res = await axios.post("http://localhost:8000/chat", { message: input });
      setHistory(h => [...h, { role: "assistant", content: res.data.reply }]);
    } catch (e) {
      setHistory(h => [...h, { role: "assistant", content: "请求失败，请稍后重试。" }]);
    }
    setInput("");
    setLoading(false);
  };

  return (
    <div className="container">
      <h2 className="title">询问 “校园智能助手”，了解更多。</h2>
      <div className="chat-box">
        {history.map((msg, idx) => (
          <div key={idx} className={msg.role === "user" ? "msg user" : "msg ai"}>
            {msg.content}
          </div>
        ))}
      </div>
      <div className="input-area">
        <input
          type="text"
          placeholder="有什么我能帮您的吗？"
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === "Enter" && handleSend()}
          disabled={loading}
        />
        <button onClick={handleSend} disabled={loading || !input.trim()}>发送</button>
      </div>
    </div>
  );
}

export default App; 